// 问答区
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    FlatList,
    TextInput,
    TouchableWithoutFeedback
}from 'react-native'
const Dimensions = require('Dimensions');
const {width,height} = Dimensions.get('window');
import { selectCommentByCourse } from '../../api/my'
import Loading from '../../common/Loading'
import Empty from './comps/Empty'
import {setSpText,setHW} from '../../component/ScreenUtil'
export default class QuestionArea extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading:true,
            isToggle:false,
            dataList:[]
        };
    }
    // 获取我的问答区
    componentWillMount() { 
        this._selectCommentByCourse()
    }
    _selectCommentByCourse(){
        this.setState({loading:true})
        let json={
        "COURSE_ID":this.props.KeShiPeriodsList[0].ID,//课时id
        "PAGE":"1",
        "ROWS":"10"
        }
        selectCommentByCourse(json).then(res=>{
            res.LIST&&res.LIST.forEach((item)=>{
                item.isAllOpen='0';//默认不展开
                if(!item.PIC){//为了避免PIC是空的时候对image设置的宽高不起作用
                    item.PIC='null'
                }
            })
            this.setState({
                loading:false,
                dataList:res.LIST
            })
            global.log(res,'问答区查询课时评论成功')
        })
    }
    render() {
        return (
            <View style={styles.introBox}>
                {this.state.loading?<Loading/>:null}
                {!this.state.loading&&this.state.dataList&&!this.state.dataList.length?<Empty {...this.props}/>:null}
                <View>
                    <View style={styles.questionBox}>
                        <FlatList
                            data={this.state.dataList} 
                            extraData={this.state}
                            showsVerticalScrollIndicator={true}
                            keyExtractor={(item,index) =>  item.ID}
                            renderItem={({item}) => this.renderItem(item)}
                        />
                    </View>
                </View>
            </View>
        );
    }
    renderItem(item) {
        return (
            <View style={styles.everyItem}>
                {this.headerIcon(item)}
                <View style={styles.rightBox}> 
                    <TouchableWithoutFeedback onPress={()=>this.replayFun(item)}>
                        <View>
                            <Text style={styles.publishName}>{item.USERNAME}</Text>
                            <Text style={styles.time}>{item.CREATE_TIME}</Text>
                            <Text style={styles.con}>{item.COMMENT_CONTENT}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                    {this.answerList(item)}
                </View>  
            </View>
        )
    }
   
    // 回复区域的列表
    answerList(item){
        if(item.LISTREPLY.length){//是否展示回复区域
            return(
                <View style={styles.answerBox}>
                    <TouchableWithoutFeedback onPress={()=>this.replayFun(item)}>
                        <View>
                            {this.openData(item)}
                        </View>
                    </TouchableWithoutFeedback>
                    <View>
                        {this.showText(item)}
                    </View>
               </View>
            )
        }
    }
    showText(item){
        if(item.LISTREPLY.length>2) {//多条 分展开收起
            if(item.isAllOpen=='1'){//true 展开全部
                return (
                    <TouchableWithoutFeedback onPress={()=>this.openToggle(item,item.isAllOpen)}>
                        <View style={styles.replyTextBox}>
                            <Text style={styles.replyText}>收起</Text>
                            <Image style={styles.openReplyIcon} source={require('../../assets/imgs/openReply.png')} />
                        </View>
                    </TouchableWithoutFeedback>
                )
            }else{//不展开
                return (
                    <TouchableWithoutFeedback onPress={()=>this.openToggle(item,item.isAllOpen)}>
                        <View style={styles.replyTextBox} >
                            <Text style={styles.replyText}>全部{item.LISTREPLY.length}条回复</Text>
                            <Image style={styles.openReplyIcon} source={require('../../assets/imgs/openReply.png')} />
                        </View>
                     </TouchableWithoutFeedback>
                )
            }
        }
    }
    openData(item){
        let dataLen=2;//默认最多展示2条
        if(item.LISTREPLY.length>2){//多条
            if(item.isAllOpen=='1'){//展开 则显示全部
                dataLen=item.LISTREPLY.length;
            }
        }
        return(//小于2条和多条不展开都是dataLen=2
            item.LISTREPLY.map((elem,i)=>{//回复区域的列表
                if(i<dataLen){
                    return(
                        <View style={styles.answerItemBox} key={i}>
                            <View style={styles.flexWrap}>
                                <Text style={styles.answerText}>
                                    <Text style={styles.name}>{elem.USERNAME}:</Text>
                                    <Text style={styles.answer}>{elem.REPLYCONTENT}</Text>
                                </Text>
                            </View>
                        </View>
                    )
                }
            })
        )
    }
    openToggle(item,isOpen){
        this.setState({
            isToggle:!this.state.isToggle//切换状态
        });
        item.isAllOpen=isOpen=='1'?'0':'1';
    }
    // 回复 只能回复 自己发的评论
    replayFun(item){
        if(item.USER_ID==global.ECourseConstant.userInfo.uuid){
            let comment_id=item.ID;//评论的id
            this.props.updateShowInput(true,comment_id);//父组件KeShiIndex的updateShowInput
        }
    }
    headerIcon(item){
        if(item.PIC&&item.PIC!=='null'){
            return(
                <Image style={styles.HeadIcon} source={{uri:item.PIC}} /> 
            )
        }else{
            return(
                <Image style={styles.HeadIcon} source={require('../../assets/imgs/default.png')} /> 
            )
        }

    }
}
const styles = StyleSheet.create({
    // 展开收起
    replyTextBox:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        height:setHW(56),
    },
    replyText:{
        color:'#999',
        fontSize:setSpText(24),
        marginRight:setHW(4),
    },
    openReplyIcon:{
        width:setHW(16),
        height:setHW(12),
    },
    // 展开收起
    allNumber:{
        color:'#666',
        fontSize:setSpText(22),
        textAlign:'center',
    },
    questionBox:{
        paddingBottom:setHW(40),
    },
    answerItemBox:{
        marginBottom:setHW(10),
    },
    list:{
        paddingBottom:setHW(10),
    },
    emptyBox:{
        flex:1,
    },
    answerText:{
        flexWrap:'nowrap',
    },
    outOfRange:{
        color:'#333',
        fontSize:setSpText(24),
        flexWrap:'wrap', 
        lineHeight:setHW(38),
    },
    name:{
        color:'#FF8A00',
        fontSize:setSpText(24),
        lineHeight:setHW(38),
    },
    answer:{
        color:'#333',
        fontSize:setSpText(24),
        lineHeight:setHW(38),
    },
    introBox:{
        padding:setHW(20),
        backgroundColor:'#fff',
        flex:1,
    },
    HeadIcon:{
        height:setHW(100),
        width:setHW(100),
        marginRight:setHW(16),
    },
    rightBox:{
        width:width - setHW(160),
    },
    everyItem:{
        flexDirection: 'row',
        backgroundColor:'#fff',
        paddingTop:setHW(20),
        paddingBottom:setHW(40),
    },
    publishName:{
        fontSize:setSpText(24),
        color:'#666666',
    },
    time:{
        fontSize:setSpText(21),
        color:'#999999',
        paddingTop:setHW(4),
        paddingBottom:setHW(4),
    },
    con:{
        fontSize:setSpText(28),
        color:'#333333',
        lineHeight:setHW(36),
    },
    answerBox:{
        backgroundColor:'#F7F7F9',
        marginTop:setHW(12),
        padding:setHW(14),
    },
   
    footerInput:{
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingRight:setHW(20),
    },
    footInputBox:{
        backgroundColor:'#fff',
        paddingTop:setHW(6),
        paddingBottom:setHW(6),
        paddingLeft:setHW(12),
        paddingRight:setHW(10),
        width:width - setHW(282),
        height: setHW(90),
    },
    questionInput:{
        backgroundColor:'#F5F5F5',
        textAlign:'center'
    },
    btn: {
        width: setHW(260),
        height: setHW(90),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#FF8A00',
    },
    btnText:{
        backgroundColor:'#FF8A00',
        color:'#fff',
        fontSize:setSpText(32),
    }
});